.swiper_nav_xs{position: absolute;top: 0px;left: 0px;width: 100%;height: auto;z-index: 9999999;}

    .swiper_nav_xs ul{overflow: hidden;width: 100%;box-shadow: 1px 2px 2px #ccc;}

    .swiper_nav_xs ul li{line-height:41px;width: 100%;box-shadow: 1px 1px 2px #ccc;}

    .swiper_nav_xs ul li:last-child{border-bottom: 1px solid #ccc;}

    .swiper_nav_xs ul li a{font-size: 14px;}

    /* .swiper_nav_click{background: rgba(0, 0, 0, 0.4);} */

    /* .ssss{background: rgba(0, 0, 0, 0.4);} */



    .swiper_nav_son{display: none;}

    .swiper_nav_son li a{font-size: 13px;display: block;}



    .swiper_nav_xs .swiper-container {

            width: 100%;

            height: 100%;

        }



    .swiper_nav_xs .swiper-slide {

        text-align: center;

        font-size: 18px;

        background: #fff;



        /* Center slide text vertically */

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        -webkit-align-items: center;

        align-items: center;

    }



    .swiper_nav_xs .menu {

        min-width: 100px;

        width: 60%;

        max-width: 320px;



        background-color: #fff;

        color: #333;

    }



    .swiper_nav_xs .content {

        width: 100%;

        height: 100%;

    }



    .swiper_nav_xs .menu-button {

        position: absolute;

        top: 9px;

        left: 0px;



        padding: 10px;



        cursor: pointer;



        -webkit-transition: .3s;

        transition: .3s;





        /*margin: 14px;

        border-radius: 5px;*/

    }



    .swiper_nav_xs .menu-button .bar:nth-of-type(1) {

        margin-top: 0px;

    }



    .swiper_nav_xs .menu-button .bar:nth-of-type(3) {

        margin-bottom: 0px;

    }



    .swiper_nav_xs .bar {

        position: relative;

        display: block;



        width: 36px;

        height: 4px;

        margin: 5px auto;

        background-color: #505050;



        border-radius: 10px;



        -webkit-transition: .3s;

        transition: .3s;

    }



    .swiper_nav_xs .menu-button:hover .bar:nth-of-type(1) {

        -webkit-transform: translateY(1.5px) rotate(-4.5deg);

        -ms-transform: translateY(1.5px) rotate(-4.5deg);

        transform: translateY(1.5px) rotate(-4.5deg);

    }



    .swiper_nav_xs .menu-button:hover .bar:nth-of-type(2) {

        opacity: .9;

    }



    .swiper_nav_xs .menu-button:hover .bar:nth-of-type(3) {

        -webkit-transform: translateY(-1.5px) rotate(4.5deg);

        -ms-transform: translateY(-1.5px) rotate(4.5deg);

        transform: translateY(-1.5px) rotate(4.5deg);

    }



    .swiper_nav_xs .cross .bar:nth-of-type(1) {

        -webkit-transform: translateY(9px) rotate(-45deg);

        -ms-transform: translateY(9px) rotate(-45deg);

        transform: translateY(9px) rotate(-45deg);

    }



    .swiper_nav_xs .cross .bar:nth-of-type(2) {

        opacity: 0;

    }



    .swiper_nav_xs .cross .bar:nth-of-type(3) {

        -webkit-transform: translateY(-9px) rotate(45deg);

        -ms-transform: translateY(-9px) rotate(45deg);

        transform: translateY(-9px) rotate(45deg);

    }



    .swiper_nav_xs .cross:hover .bar:nth-of-type(1) {

        -webkit-transform: translateY(9px) rotate(-40.5deg);

        -ms-transform: translateY(9px) rotate(-40.5deg);

        transform: translateY(9px) rotate(-40.5deg);

    }



    .swiper_nav_xs .cross:hover .bar:nth-of-type(2) {

        opacity: .1;

    }



    .swiper_nav_xs .cross:hover .bar:nth-of-type(3) {

        -webkit-transform: translateY(-9px) rotate(40.5deg);

        -ms-transform: translateY(-9px) rotate(40.5deg);

        transform: translateY(-9px) rotate(40.5deg);

    }